<template>
    <div class="app-container">
        <el-card class="box-card">
            <span>
                搜索：
            </span>
            <el-input v-model="serachVal.keyword" placeholder="Please input" />
            <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-card>

        <el-card class="box-cards" v-permission="'addUser'">
            <el-button type="primary" @click="onAdd">新增</el-button>
        </el-card>
        <el-table :data="tabList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="nickName" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="createTime" label="添加时间">
                <template #default="{ row }">
                    {{ dayjs(row.createTime).format("YYYY/MM/DD:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录">
                <template #default="{ row }">
                    {{ row.loginTime ? dayjs(row.loginTime).format("YYYY/MM/DD:mm:ss") : "" }}
                </template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="switchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="showToats(row.id)">分配角色</el-button>
                    <el-button link type="primary" @click="onEdit(row.id)" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <adminEdit :id="editId" :dialogVisible="dialogVisible" @cancel="onCancel" @confirm="onConfirm" />
        <adminTotas :id="editId" :dialogVisible="dialogVisibles" @cancel="onCancel" @confirm="onConfirm" />
    </div>
</template>

<script setup lang="ts">
import { ElMessage, dayjs } from 'element-plus'
import * as http from "@/request/http"
import umsTable from "@/hooks/umsTable"
import { reactive } from 'vue';
import adminEdit from './adminEdit.vue';
import adminTotas from "./adminTotas.vue"
import { ref } from 'vue'

const dialogVisible = ref(false)
const dialogVisibles = ref(false)
const editId = ref(0)

const serachVal = reactive({
    keyword: ""
})

const { tabList,
    paginationParams,
    handleSizeChange,
    handleCurrentChange,
    getAdminList } = umsTable(http.admin.adminList, serachVal)

const onSearch = () => {
    getAdminList()
}

const switchStatus = (val: AdminList) => {
    http.admin.updateStatus(val.id, val.status).then(res => {
        if (res.code === 200) {
            ElMessage.success(res.message)
        } else {
            ElMessage.warning("更新失败请联系管理员")
            val.status = res.data === res.data ? res.data : val.status
        }
    }).catch(() => {
        ElMessage.warning("更新失败请联系管理员")
        val.status = val.status === 1 ? 0 : 1
    })
}

const onAdd = () => {
    editId.value = 0
    dialogVisible.value = true
}

const onEdit = (id: number) => {
    editId.value = id
    dialogVisible.value = true
}

const showToats = (id: number) => {
    editId.value = id
    dialogVisibles.value = true
}

const onCancel = () => {
    editId.value = 0
    dialogVisible.value = false
    dialogVisibles.value = false
}

const onConfirm = () => {
    editId.value = 0
    console.log(1);

    getAdminList()
    dialogVisible.value = false
    dialogVisibles.value = false
}
</script>

<style scoped lang="less">
.el-pagination {
    padding: 20px 20px;
    float: right;
}

// .app-container {
//     padding: 70px 20px 20px 20px;
// }

.box-cards {
    margin-top: 20px;
}

.el-table--border {
    margin-top: 20px;
    text-align: center;
}
</style>